<template>

	<div class="dashboard">
		<el-row :gutter="20">
			<el-col :span="8">
				<el-card shadow="hover" class="mgb20" style="height:220px;">
					<div class="user-info">
						<img src="../../assets/img/headphoto.png" class="user-avator" alt />
						<div class="user-info-cont">
							<div class="user-info-name">{{name}}</div>
						</div>
					</div>
					<div class="user-info-list">
						当前时间: <span>{{nowTime}} </span>
					</div>
				</el-card>
				<el-card shadow="hover" style="height:300px;">
					<div slot="header" class="clearfix">
						<span>智慧农业大棚</span>
					</div>
					<div class="containdata">

						<el-col :span="12">
							<div class="grid-content ">当前温度:{{temp}}℃
							</div>
							<div style="height: 80px;width: 140px;" ref="chartContainer" >
															</div>
						</el-col>
						<el-col :span="12">
							<div class="grid-content ">大棚湿度:	{{hum}}%</div>
							<div style="height: 80px;width: 140px;" ref="chartContainer1" >
															</div>
						</el-col>
						<el-col :span="12">
							<div class="grid-content ">土壤湿度:{{moisture}}%</div>
							<div style="height: 80px;width: 140px;" ref="chartContainer2" >
															</div>
						</el-col>
						<el-col :span="12">
							<div class="grid-content ">光照强度:{{intensity}}Lux</div>
							<div style="height: 80px;width: 140px;" ref="chartContainer3" >
															</div>
						</el-col>
					</div>
				
				</el-card>
			</el-col>

			<div class="instublock">
				<el-card shadow="hover" style="height:540px; ">


					<div class="photo">
						<el-carousel trigger="click" height="300px">
							<el-carousel-item v-for="item in img" :key="item.id">
								<img :src="item.idView" class="image">
								<h3 class="small">{{ item }}</h3>
							</el-carousel-item>
						</el-carousel>
					</div>
					<div slot="header" class="clearfix">
						<span>智慧农业大棚</span>
					</div>

					<div class="containdata">

						<el-col :span="6">
							<div class="grid-content1 ">当前控制方式：{{Auto}}</div>
							<div>
								<svg t="1688203905511" class="icon" viewBox="0 0 1024 1024" version="1.1"
									xmlns="http://www.w3.org/2000/svg" p-id="6426" width="200" height="100">
									<path
										d="M384 196.266667v93.866666c-76.8 42.666667-128 128-128 221.866667 0 140.8 115.2 256 256 256s256-115.2 256-256c0-93.866667-51.2-179.2-128-221.866667V196.266667c123.733333 51.2 213.333333 174.933333 213.333333 315.733333 0 187.733333-153.6 341.333333-341.333333 341.333333s-341.333333-153.6-341.333333-341.333333c0-145.066667 89.6-264.533333 213.333333-315.733333z m85.333333-25.6h85.333334v213.333333h-85.333334V170.666667z"
										fill="#a0d175" p-id="6427"></path>
								</svg>
							</div>
						</el-col>
						<el-col :span="6">
							<div class="grid-content1 ">当前水泵信息:第{{Pump}}档</div>
							<div>
								<svg t="1688267271178" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2051" width="200" height="100"><path d="M156 144m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" fill="#a0d175" p-id="2052"></path><path d="M156 336m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" fill="#a0d175" p-id="2053"></path><path d="M252 900m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" fill="#a0d175" p-id="2054"></path><path d="M568 900m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" fill="#a0d175" p-id="2055"></path><path d="M568 700m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" fill="#a0d175" p-id="2056"></path><path d="M568 528m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" fill="#a0d175" p-id="2057"></path><path d="M736 456m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" fill="#a0d175" p-id="2058"></path><path d="M736 764m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" fill="#a0d175" p-id="2059"></path><path d="M856 764m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" fill="#a0d175" p-id="2060"></path><path d="M856 456m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" fill="#a0d175" p-id="2061"></path><path d="M656 336m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" fill="#a0d175" p-id="2062"></path><path d="M656 144m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" fill="#a0d175" p-id="2063"></path><path d="M156 112h500v64H156zM156 304h500v64H156z" fill="#a0d175" p-id="2064"></path><path d="M124 144h64v192H124zM624 144h64v192h-64zM536 700h64v200h-64zM220 336h64v564H220zM536 336h64v192h-64zM736 424h120v64h-120zM736 732h120v64h-120z" fill="#a0d175" p-id="2065"></path><path d="M824 456h64v308h-64zM704 456h64v308h-64z" fill="#a0d175" p-id="2066"></path><path d="M568 496h168v64h-168zM568 668h168v64h-168z" fill="#a0d175" p-id="2067"></path></svg>
							</div>
						</el-col>
						<el-col :span="6">
							<div class="grid-content1 ">当前风扇信息:第{{Fan}}档</div>
							<div><svg t="1688205128135" class="icon" viewBox="0 0 1024 1024" version="1.1"
									xmlns="http://www.w3.org/2000/svg" p-id="2698" width="200" height="100">
									<path
										d="M430.6 773.7c-19.4 0-39.6-3.8-58.5-11.4-39.4-16-64.2-45.8-66.4-79.8-3.3-52.3 30.8-90 91.2-101.1 10.2-1.9 36.1-9.2 53.9-19.8-4.5-5.9-8.2-12.3-10.9-19.2-42.6 3.9-129.4 4.7-167-45.6-26-34.8-27.1-91.8-2.7-138.7 19.7-37.7 50.8-59.5 85.9-58.6 52.3 1.6 86.6 39.1 91.9 100.3 0.9 10.1 5.4 34.8 13.5 53.2 6.4-5.6 13.7-10.2 21.6-13.6-5-41.8-8.3-126.4 38.9-165 33.7-27.5 90.7-31 138.5-8.6 38.5 18 61.7 49.1 62.1 83.2 0.6 52.2-35.4 88.2-96.3 96.1-9.4 1.2-33.5 6.6-51.6 15.3 6.3 7.3 11.3 15.7 14.7 24.7 44.9-5.7 123.3-7.8 161 36.9 28 33.3 32.4 90.1 10.7 138.3-17.4 38.8-48.2 62.6-82.3 63.5-53.2 1.4-88.7-34-97.6-94.8-1.8-11.7-7.9-36.1-17.2-53.5-6.8 5.4-14.3 9.6-22.5 12.6 7.5 48.8 9.8 120.8-31.5 158.2-19.7 18-48.7 27.4-79.4 27.4zM500.5 564l-9.2 10.7c-26.2 30.5-86.9 42-87.5 42.1-24.6 4.5-64.9 18.6-62 63.4 1.8 28.6 31.3 43.6 43.9 48.7 36.2 14.6 78.2 10.8 100.2-9.1 35.5-32.3 22.3-116.6 17.4-141.7l-2.8-14.1z m177.8 141.9h0.4-0.4zM567.7 525l10.2 9.4c29.3 27 38.9 88.5 39 89.1 3.7 24.9 16.4 65.2 61 64.4 28.7-0.8 44.8-29.8 50.4-42.2 15.9-35.5 13.6-77.7-5.4-100.4-25.2-30-90.8-31.1-144-22.1l-11.2 1.8z m-99.2-20l2.4 15c1.8 11.4 8 21.5 17.4 28.5l13.6 10 17.1-1.8c12.9-1.4 24.4-8.3 31.7-19.1l9.2-13.7-2-16.4c-1.7-13.6-9.9-25.9-21.9-32.8l-13.9-7.9-15.7 3c-13.1 2.5-24.2 10.5-30.6 22.1l-7.3 13.1z m-115-169.6c-27.9 0-45.2 27.3-51.4 39.2-17.9 34.5-18.1 76.7-0.4 100.5 26.7 35.7 106.2 35.5 149 29.7l5.1-0.7-8.3-8c-29.4-28.2-35.4-92.4-35.4-93-2.1-24.9-12.4-66.3-57.1-67.7-0.6 0.1-1 0-1.5 0z m241-48.3c-19.4 0-37.4 5.1-49.8 15.2-31.2 25.5-32.4 95-23.9 146.8l1.3 7.6 10-10.3c27.7-28.6 88.7-37 89.3-37.1 24.8-3.2 65.7-15.3 65.2-60-0.3-28.7-29-45.2-41.4-51-16.3-7.4-34.1-11.2-50.7-11.2z"
										fill="#a0d175" p-id="2699"></path>
									<path
										d="M513.4 898.1c-211.7 0-383.9-172.2-383.9-383.9s172.2-383.9 383.9-383.9 383.9 172.2 383.9 383.9-172.2 383.9-383.9 383.9z m0-731.7c-191.8 0-347.8 156-347.8 347.8S321.6 862 513.4 862s347.8-156 347.8-347.8c0-191.7-156-347.8-347.8-347.8z"
										fill="#a0d175" p-id="2700"></path>
									<path
										d="M512.9 591c-43.4 0-78.6-35.3-78.6-78.6s35.3-78.6 78.6-78.6 78.6 35.3 78.6 78.6-35.3 78.6-78.6 78.6z m0-121.1c-23.5 0-42.5 19.1-42.5 42.5 0 23.5 19.1 42.5 42.5 42.5s42.5-19.1 42.5-42.5c0-23.5-19.1-42.5-42.5-42.5z"
										fill="#a0d175" p-id="2701"></path>
								</svg></div>
						</el-col>
						<el-col :span="6">
							<div class="grid-content1 ">当前灯光信息：{{Light}}</div>
							<div>
								<svg t="1688203992630" class="icon" viewBox="0 0 1024 1024" version="1.1"
									xmlns="http://www.w3.org/2000/svg" p-id="7160" width="200" height="100">
									<path
										d="M860.010018 221.326198C788.090792 70.796541 616.162751-16.59329 446.884247 14.77454c-159.331511 29.526626-265.021114 119.11692-303.125056 266.907225-38.350933 148.957898 13.068058 273.328986 140.650026 370.149374 10.261344 7.768983 18.59167 23.37431 19.175467 35.701396 2.245371 48.006027 0.134722 96.191684 1.167592 144.242619 1.190047 57.234501 35.207414 88.804415 96.10187 89.949554 36.779173 0.718519 73.580801 0.134722 110.404882 0.134722v-0.202083c39.046998 0 78.138903 0.920602 117.140994-0.202084 55.572927-1.57176 88.894229-33.54584 89.635201-85.324089 0.696065-44.952323 2.065741-89.994461-0.538889-134.85697-1.459491-26.203477 8.846761-41.202554 30.447228-56.695612 136.159284-97.606268 182.548645-275.686625 112.066456-423.252394z m-208.954205 619.205902c-1.145139 7.724076-17.671068 19.018291-27.438431 19.220374-74.748393 1.616667-149.586602 1.751389-224.334995-0.202083-9.946993-0.291898-26.15857-13.629401-27.887506-22.812967-4.131482-22.027087-1.324769-45.199314-1.324768-69.831032h282.310469c0.022454 24.721532 2.267824 49.555333-1.324769 73.625708z m45.536119-237.156062c-33.074312 22.363893-50.184037 43.425471-43.919452 80.563904 0.808333 4.872455-0.78588 10.126622-1.57176 18.434494H375.705993c-2.267824-3.031251-4.827547-4.917362-4.580556-6.376853 7.971066-47.691676-17.19954-74.344227-57.077326-102.860436C201.420313 512.483428 166.998779 370.935254 222.324715 248.787083c55.52802-122.552338 188.925498-192.001656 336.715803-175.363458 130.523404 14.707179 244.139166 117.096087 264.055604 244.947499 18.209957 117.006272-23.55394 215.533142-126.50419 285.004914zM621.955807 963.937679c-35.611581 0.067361-71.178254 0-106.76738 0-37.812044 0.044907-75.601634 0.157176-113.458586-0.044908-20.387967-0.112269-36.015747 6.960649-37.385424 27.281255-1.481945 21.937273 13.831484 32.108802 35.701396 32.288432 74.478949 0.493982 149.047713 0.628704 223.526661 0.202084 21.735189-0.157176 36.689359-9.789817 35.319683-32.468062-1.257408-21.420837-16.795373-27.348616-36.93635-27.258801z"
										fill="#a0d175" p-id="7161"></path>
								</svg>
							</div>
						</el-col>
					</div>


				</el-card>
			</div>
		</el-row>
	</div>
	
</template>

<script>
	import * as echarts from 'echarts';
	import Schart from 'vue-schart';
	import bus from '../common/bus';
	import {
		gettemhum,
		getDeviceState
	} from '../../api/index';
	export default {
		name: 'dashboard',
		data() {
			return {
				chartContainer: null,
				chartContainer1: null,
				chartContainer2: null,
				chartContainer3: null,
				Auto: '',
				Pump: '',
				Fan: '',
				Light: '',
				hum: '',
				temp: '',
				moisture: '',
				intensity: '',
				img: [{
						id: 0,
						idView: require('../../assets/img/dashboardshow1.jpg')
					},
					{
						id: 1,
						idView: require('../../assets/img/dashboardshow2.jpg')
					},
					{
						id: 2,
						idView: require('../../assets/img/dashboardshow3.jpg')
					},
					{
						id: 3,
						idView: require('../../assets/img/dashboardshow4.jpg')
					}
				],

				option: {
					 series: [
					     {
					       radius:'80%',
					       type: 'gauge',
					       axisLine: {
					         lineStyle: {
					           width: 3,
					           color: [
					             [0.3, '#67e0e3'],
					             [0.7, '#37a2da'],
					             [1, '#fd666d']
					           ]
					         }
					       },
					       pointer: {
							width:2,
					         itemStyle: {
					           color: '#4c6337'
					         }
					       },
					       axisTick: {
					         distance: -15,
					         length: 4,
					         lineStyle: {
					           color: '#fff',
					           width: 2
					         }
					       },
					       splitLine: {
					         distance: -15,
					         length: 15,
					         lineStyle: {
					           color: '#ffffff',
					           width: 2
					         }
					       },
					       axisLabel: {
					         color: 'inherit',
					         distance: 10,
					         fontSize: 1
					       },
					       detail: {
					         valueAnimation: true,
					          formatter: ' ',
					         color: 'inherit'
					       },
					       data: [
					         {
					           value: 70
					         }
					       ]
					     }
					   ]
				},
				option1: {
					 series: [
					     {
					       radius:'80%',
					       type: 'gauge',
					       axisLine: {
					         lineStyle: {
					           width: 3,
					           color: [
					             [0.3, '#67e0e3'],
					             [0.7, '#37a2da'],
					             [1, '#fd666d']
					           ]
					         }
					       },
					       pointer: {
							width:2,
					         itemStyle: {
					           color: '#4c6337'
					         }
					       },
					       axisTick: {
					         distance: -15,
					         length: 4,
					         lineStyle: {
					           color: '#fff',
					           width: 2
					         }
					       },
					       splitLine: {
					         distance: -15,
					         length: 15,
					         lineStyle: {
					           color: '#ffffff',
					           width: 2
					         }
					       },
					       axisLabel: {
					         color: 'inherit',
					         distance: 10,
					         fontSize: 1
					       },
					       detail: {
					         valueAnimation: true,
					          formatter: ' ',
					         color: 'inherit'
					       },
					       data: [
					         {
					           value: 70
					         }
					       ]
					     }
					   ]
				},
				option2: {
					 series: [
					     {
					       radius:'80%',
					       type: 'gauge',
					       axisLine: {
					         lineStyle: {
					           width: 3,
					           color: [
					             [0.3, '#67e0e3'],
					             [0.7, '#37a2da'],
					             [1, '#fd666d']
					           ]
					         }
					       },
					       pointer: {
							width:2,
					         itemStyle: {
					           color: '#4c6337'
					         }
					       },
					       axisTick: {
					         distance: -15,
					         length: 4,
					         lineStyle: {
					           color: '#fff',
					           width: 2
					         }
					       },
					       splitLine: {
					         distance: -15,
					         length: 15,
					         lineStyle: {
					           color: '#ffffff',
					           width: 2
					         }
					       },
					       axisLabel: {
					         color: 'inherit',
					         distance: 10,
					         fontSize: 1
					       },
					       detail: {
					         valueAnimation: true,
					          formatter: ' ',
					         color: 'inherit'
					       },
					       data: [
					         {
					           value: 70
					         }
					       ]
					     }
					   ]
				},
				option3: {
					 series: [
					     {
					       radius:'80%',
					       type: 'gauge',
					       axisLine: {
					         lineStyle: {
					           width: 3,
					           color: [
					             [0.3, '#67e0e3'],
					             [0.7, '#37a2da'],
					             [1, '#fd666d']
					           ]
					         }
					       },
					       pointer: {
							width:2,
					         itemStyle: {
					           color: '#4c6337'
					         }
					       },
					       axisTick: {
					         distance: -15,
					         length: 4,
					         lineStyle: {
					           color: '#fff',
					           width: 2
					         }
					       },
					       splitLine: {
					         distance: -15,
					         length: 15,
					         lineStyle: {
					           color: '#ffffff',
					           width: 2
					         }
					       },
					       axisLabel: {
					         color: 'inherit',
					         distance: 10,
					         fontSize: 1
					       },
					       detail: {
					         valueAnimation: true,
					          formatter: ' ',
					         color: 'inherit'
					       },
						   min:1200,
						   max:50000,
					       data: [
					         {
					           value: 70,
							   
					         }
					       ]
					     },
					   ]
				},


				nowTime: "",
				name: localStorage.getItem('ms_username'),
				data: [],

			};
		},
		components: {
			Schart
		},
		created() {
			this.getNowTime(); //进入页面调用该方法获取当前时间
			clearInterval(myTimeDisplay); //销毁之前定时器
			var myTimeDisplay = setInterval(() => {
				this.getNowTime(); //每秒更新一次时间
			}, 1000);
			
			this.getTH();
			// 在组件创建时启动轮询
			this.getDeviceS();
			this.startPolling();
			this.startPollingDevice();
			
		},
		mounted() {
			this.init();
		},
		methods: {
			//接受图表，赋值到变量
			init() {
				this.chartContainer = echarts.init(this.$refs.chartContainer);
				this.chartContainer1 = echarts.init(this.$refs.chartContainer1);
				this.chartContainer2 = echarts.init(this.$refs.chartContainer2);
				this.chartContainer3 = echarts.init(this.$refs.chartContainer3);
				this.chartContainer.setOption(this.option);
				this.chartContainer1.setOption(this.option1);
				this.chartContainer2.setOption(this.option2);
				this.chartContainer3.setOption(this.option3);
				// console.log(this.echart1);
			},
			getDeviceS() {
				//获取设备信息
				getDeviceState().then(res => {
					//console.log(res);
					if (res.Auto == 0) {
						this.Auto = '手动';
					} else if (res.Auto == 1) {
						this.Auto = '自动化';
					}
					if (res.Light == 0) {
						this.Light = '关';
					} else  {
						this.Light = '开';
					}

					this.Pump = res.Pump;
					this.Fan = res.Fan;

				})

			},
			startPolling() {
				// 使用定时器设置轮询间隔
				this.timer = setInterval(() => {
					this.fetchData();
				}, 10000); // 间隔时间为 1 秒
			},
			startPollingDevice() {
				// 使用定时器设置轮询间隔
				this.timer = setInterval(() => {
					this.fetchDataDevice();
				}, 1000); // 间隔时间为 1 秒
			},
			fetchData() {
				// 向服务器发送请求，获取数据
				this.getTH();
				setTimeout(() => {
					this.count++;
					// 每次请求成功后增加计数
				}, 1000); // 模拟请求延迟时间为 1 秒
			},
			fetchDataDevice() {
				// 向服务器发送请求，获取数据
				this.getDeviceS();
			},
			//获取当前时间
			getNowTime() {
				var date = new Date();
				var time = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + this.addZero(
					date.getHours()) + ':' + this.addZero(date.getMinutes()) + ':' + this.addZero(date.getSeconds());
				this.nowTime = time;
			},
			//根据自己的需求，看要不要在时间不大于10的时候在前面补0，如果需要直接this.addZero(date.getHours()),其它与之相同，如果不需要删掉addZero（）方法即可。
			//小于10的拼接上0字符串
			addZero(s) {
				return s < 10 ? ('0' + s) : s;
			},

			changeDate() {
				const now = new Date().getTime();
				this.data.forEach((item, index) => {
					const date = new Date(now - (6 - index) * 86400000);
					item.name = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
				});

			},
			getTH() {
				gettemhum().then(res => {
					//console.log(res);
					if (res.tempCondition == 3 || res.intensityCondition == 3 || res.humCondition == 3 || res
						.moisCondition == 3) {
						// this.$message({
						// 	type: 'error',
						// 	duration: 10000,
						// 	message: '当前大棚有异常状况!!!'
						// })
					}
					// console.log(res);
					this.option1.series[0].data[0].value = res.hum[9];
					this.hum = res.hum[9];
					this.option.series[0].data[0].value = res.temp[9];
					this.temp = res.temp[9];
					this.option3.series[0].data[0].value = res.intensity[9];
					this.intensity = res.intensity[9];
					this.option2.series[0].data[0].value = res.moisture[9];
					this.moisture = res.moisture[9];
					
					//渲染
					//console.log(that.option);
					this.chartContainer.setOption(this.option);
					this.chartContainer1.setOption(this.option1);
					this.chartContainer2.setOption(this.option2);
					this.chartContainer3.setOption(this.option3);
					
				});
			}


		}
	};
</script>


<style scoped>
	.dashboard {
		/* background-image: url(../../assets/img/login.jpg); */
	}

	/* 	.demonstration{
		align: center;
	} */
	.block {
		height: 500px;
	}

	.instublock {
		height: 0px;
	}

	.el-carousel__item h3 {
		color: #afd4ac;
		font-size: 20px;
		opacity: 1;
		line-height: 250px;
		margin: 0;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}

	.buttonbox1 {
		/* display: flex; */
		position: relative;
		width: 100px;
		/* 	flex-direction: column;
		flex-wrap: wrap; */

	}

	.buttonbox2 {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		width: 400px;
		left: 30%;
		position: relative;

	}

	.add_btn {
		max-width: 150px;
		min-height: 40px;
		color: #000;
	}

	.el-row {
		margin-bottom: 20px;
	}

	.grid-content {
		display: flex;
		/* align-items: center; */
		width: 140px;
		margin: 5px;
		/* -ms-text-size-adjust: 10px; */
		/* align-content: center; */
		justify-content: center;
		/* background-color: #c9ffaf; */
		/* display: flex;
		align-items: center; */
		/* width: ; */
		height: 25px;
	}

	.grid-content1 {
		display: flex;
		justify-content: center;
		background-color: #fff;
		/* display: flex;
		align-items: center; */
		height: 30px;
	}


	.grid-cont-right {
		flex: 1;
		text-align: center;
		font-size: 14px;
		color: #999;
	}

	.grid-num {
		font-size: 30px;
		font-weight: bold;
	}

	.grid-con-icon {
		font-size: 50px;
		width: 100px;
		height: 100px;
		text-align: center;
		line-height: 100px;
		color: #fff;
	}

	.grid-con-1 .grid-con-icon {
		background: rgb(45, 140, 240);
	}

	.grid-con-1 .grid-num {
		color: rgb(45, 140, 240);
	}

	.grid-con-2 .grid-con-icon {
		background: rgb(100, 213, 114);
	}

	.grid-con-2 .grid-num {
		color: rgb(45, 140, 240);
	}

	.grid-con-3 .grid-con-icon {
		background: rgb(242, 94, 67);
	}

	.grid-con-3 .grid-num {
		color: rgb(242, 94, 67);
	}

	.user-info {
		display: flex;
		align-items: center;
		padding-bottom: 20px;
		border-bottom: 2px solid #ccc;
		margin-bottom: 20px;
	}

	.user-avator {
		width: 120px;
		height: 120px;
		border-radius: 50%;
	}

	.user-info-cont {
		padding-left: 50px;
		flex: 1;
		font-size: 14px;
		color: #999;
	}

	.user-info-cont div:first-child {
		font-size: 30px;
		color: #222;
	}

	.user-info-list {
		font-size: 14px;
		color: #999;
		line-height: 20px;
		color: rgb(38, 139, 10);
	}

	.user-info-list span {
		margin-left: 70px;
	}

	.mgb20 {
		margin-bottom: 20px;
	}

	.todo-item {
		font-size: 14px;
	}

	.todo-item-del {
		text-decoration: line-through;
		color: #999;
	}

	.schart {
		width: 100%;
		height: 300px;
	}

	.photo {
		margin-bottom: 20px;
	}
</style>